<template>
	<view class="tt">
	  <scroll-view class="scroll-view" refresher-enabled scroll-y :refresher-triggered="isTriggered" @scrolltolower="onScrollToLower" @refresherrefresh="onScrollViewRefresh">
		<view class="content">
		  <view class="container">
			<uni-card v-for="notify in filteredList" :key="notify.id" :border="false" :is-shadow="false">
			  <view class="order">
				<view class="itemm">{{ notify.title }}</view>
				<text class="state">{{ getStatusText(notify.status) }}</text>
			  </view>
			  <view class="time">订单号: {{ notify.id }}</view>
			  <view class="time">类型: {{ notify.type }}</view>
		<text  selectable="true"  class="time">业务领域: {{ notify.domain }}</text >
		<view   selectable="true" class="time">联系方式: {{ notify.tel }}</view>

			  <view class="details">
				<view class="time">创建时间: {{ notify.createdAt }}</view>

			  </view>
			</uni-card>
			<view v-if="isEmpty" class="message-blank">暂无消息</view>
		  </view>
		</view>
	  </scroll-view>
	</view>
  </template>

  <script setup>
  import taskApi from '@/api/task.js';
  import { ref, onMounted, computed } from "vue"

  const fromList = ref([])
  const nextPage = ref(1)
  const isEmpty = ref(false)
  const hasMore = ref(true)
  const isTriggered = ref(false)
  const mobile = ref('')

  onMounted(() => {
	fromData()
  })

  function onScrollToLower() {
	if (!hasMore.value) {
	  return uni.utils.toast('没有更多数据了!')
	}
	fromData(nextPage.value)
  }

  function onScrollViewRefresh() {
	isTriggered.value = true
	fromData()
	isTriggered.value = false
  }

  async function fromData(currentPage = 1, pageSize = 5) {
	const res = await taskApi.sheetList(currentPage, pageSize,mobile.value)
	console.log("渲染数据",res);
	if (res.code !== 200) {
	  return uni.utils.toast('获取通知失败，稍后重试!')
	}

	if (res.data.currentPage === 1) {
	  fromList.value = []
	}
	fromList.value = [...fromList.value, ...(res.data.data || [])]
	nextPage.value = res.data.currentPage + 1
	hasMore.value = nextPage.value <= res.data.resultCount
	isEmpty.value = fromList.value.length === 0
  }

  const filteredList = computed(() => {
	return fromList.value.filter(notify => notify.status === 4); // 过滤出状态为 3 的数据
  });

  function getStatusText(status) {
	switch (status) {
	  case 0:
		return '待支付'
	  case 1:
		return '勘测中'
	  case 2:
		return '已勘测'
	  case 3:
		return '安装中'
	  case 4:
		return '已完成'
	  case 5:
		return '已取消'
	  case 6:
		return '退款中'
	  case 7:
		return '已退款'
	  default:
		return ''
	}

  }

  fromData()
  </script>

  <style>
	.content {
	  height: 100%;
	  background-color: #f5f5f5;
	  padding-top: 20px;
	}

	.container {
	  margin-left: 2%;
	}

	.uni-card {
	  border: 1px solid #ffffff;
	  margin-left: 30px;
	  width: 85%;
	  background-color: #ffffff !important;
	}

	.order {
	  display: flex;
	  justify-content: space-between;
	  color: #ffffff;
	}

	.state {
	  color: #fe486e;
	  padding-bottom: 10px;
	}

	.time {
	  color: #7a7b75;
	  font-size: 12px;
	}

	.itemm {
	  color: #000;
	}

	.details {
	  display: flex;
	  justify-content: space-between;
	}

	.particulars {
	  color: #fff;
	  width: 100px;
	  background-color: #8bc34a;
	  text-align: center;
	  border-radius: 50px;
	  margin-bottom: 10px;
	  margin-right: 10px;
	}

	.message-blank {
	  width: 100%;
	  text-align: center;
	  margin-top: 30px;
	}

	.receiving {

	  margin-top: 20px;
	  width: 100%;
	  height: 10%;
	  text-align: center;
	  border: 1px solid #e85645;
	  color: #fe4833;
	  border-radius: 5px;
	  margin-bottom: 50px;
	}

	.ff {
	  border-top: 1px solid #f4f4f4;
	}
  </style>
